<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid red; margin: 0 auto; display: block;"></canvas>
	</body>
	<!--
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);	

参数值

参数				描述
img		规定要使用的图像、画布或视频。
sx		可选。开始剪切的 x 坐标位置。
sy		可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x		在画布上放置图像的 x 坐标位置。
y		在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）
    -->
	<script>
		var canvas = document.getElementById("canvas");
		var context = canvas.getContext("2d");

		canvas.width =800;
		canvas.height=600;
		//
		var canvas,context;
		var img,//图片对象
		    //imgIsLoaded,//图片是否加载完成;
		    imgX=0,
		    imgY=0,//位移量
		    imgScale=1;//缩放倍数默认1
		
	/*	(function int(){
		    canvas=document.getElementById('canvas');
		    context=canvas.getContext('2d');
		    loadImg();
		})();
		*/
	/*	function loadImg(){
		    img=new Image();
		    img.onload=function(){
		      //  imgIsLoaded=true;
		        drawImage();
		    }
		    img.src="../img/fj.jpg";
		}*/
		 var img = new Image();
		  img.src="../img/fj.jpg";
		 img.onload = function(){//图片加载完成后再绘制
		 	context.drawImage(img,0,0);	
		 }
		 
		//繪圖
		function myDrawImage(){
		    context.clearRect(0,0,canvas.width,canvas.height);//先清空
		context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);//绘制
		}
		
		//鼠標點擊
		canvas.onmousedown=function(event){
		    var pos=windowToCanvas(canvas,event.clientX,event.clientY);//点击是位置
		    //鼠标移动
		    canvas.onmousemove=function(event){
		        canvas.style.cursor="move";//鼠標樣式--可移动对象
		        var pos1=windowToCanvas(canvas,event.clientX,event.clientY);//鼠标当前移动到的位置
		        var x=pos1.x-pos.x;
		        var y=pos1.y-pos.y;
		        pos=pos1;
		        imgX+=x;
		        imgY+=y;
		        myDrawImage();
		    }
		    //鼠标松开
		    canvas.onmouseup=function(){
		        canvas.onmousemove=null;
		        canvas.onmouseup=null;
		        canvas.style.cursor="default";//默认的游标状态（通常为一个箭头）
		    }
		}
		//鼠标缩放  onmousewheel鼠标滚轮滑动
		canvas.onmousewheel=canvas.onwheel=function(event){//chrome firefox浏览器兼容
		    var pos=windowToCanvas(canvas,event.clientX,event.clientY);
		    //　clientX/clientY：是指事件发生的时候，鼠标的横、纵坐标，返回的是整数，它们的值是相对于包容窗口的左上角生成的。
		    event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));
		    //deltaX-获取一个轮子绕x轴（水平方向）转动的距离。deltaY-获取一个车轮已绕y轴（垂直方向）旋转的距离。
		    //deltaZ-获取一个轮子绕z轴旋转的距离。deltaMode-获取一个值，该值指示单元的增量值：DOM_DELTA_PIXEL（0×00）默认。以像素为单位的增量
		   
		   //????这个计算方法有问题！！！！
		     if(event.wheelDelta>0){
		        imgScale*=2;//每次扩大2倍
		      //  imgScale =imgScale>4?4:imgScale*2;
		        imgX=imgX*2-pos.x;
		        imgY=imgY*2-pos.y;
		    }else{
		      //  imgScale/=2;
		        imgScale =imgScale>0.2?imgScale*0.5:0.25;//最小缩放倍数不能小于1/4;(会看不见的)
		      
		        imgX=imgX*0.5+pos.x*0.5;
		        imgY=imgY*0.5+pos.y*0.5;
		    }
		    
		  
		    myDrawImage();
		}
		
		//获取鼠标前位置
		function windowToCanvas(canvas,x,y){
		    var bbox = canvas.getBoundingClientRect();
		    return {
		        x:x - bbox.left - (bbox.width - canvas.width) / 2,
		        y:y - bbox.top - (bbox.height - canvas.height) / 2
		    };
		}
		

	</script>
</html>
